<template>
    <el-row class="lives-news">
        <el-row class="title">
            <h3>老师介绍</h3>
        </el-row>
        <el-row>
            <el-form :inline="true">
                <el-form-item>
                    <el-button type="primary" @click="showAddDialog"><i class="el-icon-plus el-icon--left"></i>设置</el-button>
                </el-form-item>
            </el-form>
        </el-row>
        <el-row>
            <el-table :data="datas" border>
                <el-table-column label="老师介绍" align="center">
                    <template slot-scope="scope">
                        <img class="banner-thumb qr-img" :src="UPLOADURL + scope.row" alt="">
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" width="200px">
                    <template slot-scope="scope">
                        <el-button size="small" type="primary" @click="updateDatas(scope.$index, scope.row)">修改</el-button>
                        <el-button size="small" type="danger" @click="deleteDatas(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-row>
        <el-dialog title="老师介绍" :visible.sync="showDialog" size="tiny" @close="closeVideoDialog" class="dialog">
		    <el-form :model="dialogData" label-width="120px">
                <el-form-item label="老师介绍">
                    <el-upload class="avatar-uploader" :headers="uploadHeader" :action="BASEURL + '/upload/teacher'" :show-file-list="false" :on-success="handleAvatarSuccess">
                        <el-button size="small" type="primary">点击上传</el-button>
                        </el-upload>
                    <div>
                        <img v-if="imageUrl" :src="UPLOADURL+imageUrl" alt="" class="banner-thumb">
                    </div>
                </el-form-item>
            </el-form>
		    <div slot="footer" class="dialog-footer">
		        <el-button @click="cancelAddVideos">取 消</el-button>
		        <el-button type="primary" @click="addVideos" :loading="addLoading">确 定</el-button>
		    </div>
		</el-dialog>
    </el-row>
</template>
<script>
import {
    getConfig,
    setConfig
} from '@/api/api'
export default {
    data: function() {
        return {
            isAdd: true,
            showDialog: false,
            addLoading: false,
            datas: [],
            dialogData: {
                imageUrl: ''
            },
            uploadHeader: {
                TOKEN: sessionStorage.getItem('jwt'),
                APPID: 1
            },
            imageUrl: ''
        }
    },
    created: function(){
		this.getTeacherIntro();
    },
    methods:{
    	getTeacherIntro: function(){
            getConfig('teacherIntro').then(res => {
                console.log(res)
                this.datas = [res.teacherIntro]
            })
    		
    	},
    	showAddDialog: function(){
    		this.isAdd = true;
            this.showDialog = true;
    	},
    	closeVideoDialog: function(){
    		this.isAdd = true;
            this.showDialog = false;
            this.dialogData = {
                imageUrl: ''
            }
            this.imageUrl = '';
    	},
    	updateDatas: function(index, row){
            this.dialogData = {
                imageUrl: row
            }
            this.imageUrl = row;
    		this.isAdd = false;
    		this.showDialog = true;
    	},
    	cancelAddVideos: function(){
    		this.closeVideoDialog()
    	},
    	addVideos: function(){
            if(!this.imageUrl){
                this.$message({
                    message: '请上传二维码',
                    type: 'error'
                })
                return;
            }
            var obj = {
                teacherIntro: this.dialogData.imageUrl
            }
            setConfig(obj).then(res => {
                this.$message({
                    message: '操作成功',
                    type: 'success'
                })
                this.showDialog = false;
                this.imageUrl = "";
                this.dialogData.imageUrl = "";
                this.getTeacherIntro();
            })
    	},
        deleteDatas: function(index, row){
            setConfig({teacher: ''}).then(res => {
                this.$message({
                    message: '操作成功',
                    type: 'success'
                })
                this.getTeacherIntro();
            })
        },
        handleAvatarSuccess(res){
            if(res.status){
                this.$message({
                    message: '上传成功',
                    type: 'success'
                })
                this.imageUrl = res.data.webPath;
                this.dialogData.imageUrl = res.data.webPath;
            }else{
                this.$message({
                    message: '上传失败',
                    type: 'error'
                })
            }
        }
    }
}
</script>
<style scoped lang="scss">
	.lives-news {
	    .title {
	        font-size: 12px;
	        border-bottom: 1px solid #eaeaea;
	        margin-bottom: 5px;
	        h3 {
	            display: inline-block;
	            padding: 5px 0;
	            margin: 0;
	            font-weight: normal;
	            color: #23b7e5;
	            border-bottom: 1px solid #23b7e5;
	        }
	    }
        .banner-thumb{
            width: 100%;
        }
        .thumb{
            width: 120px;
        }
        .qr-img{
            width: 600px;
        }
	}
</style>